import { Tabs, useSegments } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { StatusBar, Image } from "react-native";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { HapticTab } from "@/components/HapticTab";
export default function TabLayout() {
  const segments = useSegments();
  const [activeColor, setActiveColor] = useState("#fff"); // 主题色
  const { t } = useTranslation();

  useEffect(() => {
    // 只有在 tabs 路由下才改变颜色
    if (segments[0] === "(tabs)") {
      const activeTab: any = segments[segments.length - 1];

      switch (activeTab) {
        case "category":
          break;
        case "cart":
          break;
        case "profile":
          break;
        case "index":
        default:
          break;
      }
    }
  }, [segments]);

  return (
    <>
      <StatusBar
        translucent
        backgroundColor={"#000"}
        barStyle={"light-content"}
      />

      <Tabs
        backBehavior="none"
        screenOptions={{
          tabBarActiveTintColor: activeColor,
          tabBarInactiveTintColor: "rgb(142,142,144)",
          tabBarStyle: {
            backgroundColor: "#000",
            borderColor: "#303030",
            borderTopWidth: 1,
          },
          headerShown: true,
          tabBarButton: HapticTab,
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            tabBarLabel: t("common.home"),
            headerShown: false,
            tabBarIcon: ({ color, size }) =>
              color === activeColor ? (
                <Image
                  source={require("@/assets/images/tabbar/home-ed.png")}
                  className="w-[20px] h-[20px]"
                />
              ) : (
                <Image
                  source={require("@/assets/images/tabbar/home.png")}
                  className="w-[20px] h-[20px]"
                />
              ),
          }}
        />
        <Tabs.Screen
          name="category"
          options={{
            title: t("market.transactionHistory"),
            headerShown: false,
            tabBarIcon: ({ color, size }) =>
              color === activeColor ? (
                <Image
                  source={require("@/assets/images/tabbar/trade-ed.png")}
                  className="w-[20px] h-[20px]"
                />
              ) : (
                <Image
                  source={require("@/assets/images/tabbar/trade.png")}
                  className="w-[20px] h-[20px]"
                />
              ),
          }}
        />
        <Tabs.Screen
          name="cart"
          options={{
            title: t("recharge.amount"),
            headerShown: false,
            tabBarIcon: ({ color, size }) =>
              color === activeColor ? (
                <Image
                  source={require("@/assets/images/tabbar/purse-ed.png")}
                  className="w-[20px] h-[20px]"
                />
              ) : (
                <Image
                  source={require("@/assets/images/tabbar/purse.png")}
                  className="w-[20px] h-[20px]"
                />
              ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: t("common.profile"),
            headerShown: false,
            tabBarIcon: ({ color, size }) =>
              color === activeColor ? (
                <Image
                  source={require("@/assets/images/tabbar/my-ed.png")}
                  className="w-[20px] h-[20px]"
                />
              ) : (
                <Image
                  source={require("@/assets/images/tabbar/my.png")}
                  className="w-[20px] h-[20px]"
                />
              ),
          }}
        />
      </Tabs>
    </>
  );
}
